<template>
  <div class="cpk-chart">
    <el-row :gutter="20">
      <el-col :span="24">
        <chart-view class="chart-content" :chart-option="chartOpt" :auto-resize="true" width="100%" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Vue from 'vue';
import ChartView from '@/components/chart/index.vue';
// import { Descriptions } from 'element-ui'
// Vue.use(Descriptions);
export default {
    name: 'cpkChart',
    components: {
        ChartView
    },
    data() {
        return {
            chartOpt: {
                title: {
                    text: 'Temperature Change in the Coming Week'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {},
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        dataView: { readOnly: false },
                        magicType: { type: ['line', 'bar'] },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} °C'
                    }
                },
                series: [
                    {
                        name: 'Highest',
                        type: 'line',
                        data: [10, 11, 13, 11, 12, 12, 9],
                        markPoint: {
                            data: [
                                { type: 'max', name: 'Max' },
                                { type: 'min', name: 'Min' }
                            ]
                        },
                        markLine: {
                            data: [{ type: 'average', name: 'Avg' }]
                        }
                    },
                    {
                        name: 'Lowest',
                        type: 'line',
                        data: [1, -2, 2, 5, 3, 2, 0],
                        markPoint: {
                            data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
                        },
                        markLine: {
                            data: [
                                { type: 'average', name: 'Avg' },
                                [
                                    {
                                        symbol: 'none',
                                        x: '90%',
                                        yAxis: 'max'
                                    },
                                    {
                                        symbol: 'circle',
                                        label: {
                                            position: 'start',
                                            formatter: 'Max'
                                        },
                                        type: 'max',
                                        name: '最高点'
                                    }
                                ]
                            ]
                        }
                    }
                ]
            }
        }
    },

    methods: {
        init() {

        },
        getParam(low, mean, up, top, lsl, usl) {
            const res = {};
            res['low'] = this.getFloat(low);
            res['mean'] = this.getFloat(mean);
            res['up'] = this.getFloat(up);
            res['top'] = this.getFloat(top);
            res['lsl'] = this.getFloat(lsl);
            res['usl'] = this.getFloat(usl);
            return res;
        },
        getFloat(numbers, digit = 3) {
            return (numbers.toFixed(digit) / 1).toString();
        },
        showYieldTrendChart(data, i) {

            this.Echarts.yieldTrendChart[i] = echarts.init(document.getElementById(`yieldTrendChart-${i}`));
            this.Echarts.yieldTrendChart[i].setOption(EchartsClass.getYieldTrendOption(data));
            this.Echarts.yieldTrendChart[i].on('click', (params) => {
                this.showPlatoChart(params, i, data);

            })

            this.Echarts.yieldTrendChart[i].on('dblclick', (params) => {
                const option = this.Echarts.yieldTrendChart[i].getOption()
                const lineCode = option.title[0].text.split(' ')[0]
                const itemName = option.title[0].text.split(' ')[1]
                if (params.value < data.yieldTarget) {
                    const record = {
                        type: 'YIELD',
                        manufactureDate: params.name,
                        partNo: this.model.partNo,
                        lineCode: lineCode,
                        parameterName: itemName,
                    }
                    this.spcRecord = record
                    this.getAbnormalReasonDetail(record)
                    $('#abnormalReasonModal').modal('show');
                }
            })

        },
        getData() {
            let index = 0
            this.setEchartsList("yield");
            if (this.tabInfo["yield"]) {
                return
            } else {

                this.tabInfo["yield"] = true;
            }

            const spcQueryParam = this.getQueryParameter();
            this.httpService.post(Config.API_URL.SPC.GET_SPC_YIELD_DATA_URL, spcQueryParam,
                (successful, dataSet, res) => {
                    if (dataSet.stateCode === 'SYSTEM_SUCCESS') {
                        const spcStatisticsResults = _.get(dataSet, 'data', [])
                        for (let i = 0; i < spcStatisticsResults.length; i++) {
                            const spcStatisticsResult = spcStatisticsResults[i];
                            const title = _.get(spcStatisticsResult, 'reportName', '')
                            const sampleData = _.get(spcStatisticsResult, 'sampleData', [])
                            const sampleCount = _.get(spcStatisticsResult, 'sampleCount', 0)
                            const cpkSubgroupSize = this.settingInfo.cpkSubgroupSize
                            const maxValue = _.get(spcStatisticsResult, 'data.maxValue', 0)
                            const minValue = _.get(spcStatisticsResult, 'data.minValue', 0)

                            const lsl = _.get(spcStatisticsResult, 'lsl', '')
                            const cl = _.get(spcStatisticsResult, 'standardValue', '')
                            const usl = _.get(spcStatisticsResult, 'usl', '')

                            const dateListYield = _.get(spcStatisticsResult, 'yieldResult.dateArray', [])
                            const dataListYield = _.get(spcStatisticsResult, 'yieldResult.yieldArray', [])
                            const yieldTarget = _.get(spcStatisticsResult, 'yieldResult.yieldTarget', '')
                            const yieldAxisMin = _.get(spcStatisticsResult, 'yieldResult.yieldAxisMin', null)
                            const yieldPlatoResults = _.get(spcStatisticsResult, 'yieldResult.yieldPlatoResults', null)
                            const failCountArray = _.get(spcStatisticsResult, 'yieldResult.failCountArray', [])
                            const sampleCountArray = _.get(spcStatisticsResult, 'yieldResult.sampleCountArray', [])
                            const yieldData = {
                                dateList: dateListYield,
                                dataList: dataListYield,
                                yieldTarget: yieldTarget,
                                title: title,
                                axisMin: yieldAxisMin,
                                yieldPlatoResults: yieldPlatoResults,
                                failCountArray: failCountArray,
                                sampleCountArray: sampleCountArray
                            }
                            this.yieldDatas.push('data')
                            setTimeout(() => {
                                this.showYieldTrendChart(yieldData, i)
                                setTimeout(() => {
                                    this.onResize();
                                }, 50)
                            }, 50);

                        }

                    } else {
                        toastr.error(
                            dataSet.messageCode ? this.translate.instant(dataSet.messageCode, { value: this.translate.instant('PART') })
                                : dataSet.message);
                    }
                },
                (successful, msg, err) => {
                    toastr.error(msg);
                }
            );

        },
        getYieldTrendOption(data) {
            const option = {
                title: {
                    show: true,
                    text: data.title,
                },
                // legend: {
                //     data: ['良率', '样本数', '不良数']
                // },
                toolbox: {
                    feature: {
                        dataView: { show: true, readOnly: false },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    },
                    orient: "vertical",
                    top: "middle"
                },
                tooltip: {
                    trigger: 'axis', // 触发类型,数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
                    axisPointer: { // 指示器类型。
                        type: 'shadow'
                    },
                    formatter: "时间：{b}<br/>良率：{c}%<br/>样本数：{c1}<br/>不良数：{c2}"
                },
                xAxis: {
                    type: 'category',
                    data: data.dateList
                },
                yAxis: {
                    type: 'value',
                    min: data.axisMin,
                    max: 100,
                    axisLabel: {
                        formatter: '{value}%'
                    },
                },
                series: [
                    {
                        name: '良率',
                        data: data.dataList,
                        animation: false,
                        type: 'line',
                        color: '#30d3ff',
                        itemStyle: {
                            width: 2,
                            color: (params) => {
                                if (params.value <= data.yieldTarget) {
                                    return '#ff6664';
                                } else {
                                    return '#888';
                                }
                            },
                        },
                        symbol: (value) => {
                            if (value < data.yieldTarget) {
                                return 'circle';
                            } else {
                                return 'circle';
                            }
                        },
                        symbolSize: (value) => {
                            if (value < data.yieldTarget) {
                                return '8';
                            } else {
                                return '8';
                            }
                        },
                        label: {
                            show: true,
                            color: (params) => {
                                if (params.value <= data.yieldTarget) {
                                    return '#ff6664';
                                } else {
                                    return '#888';
                                }
                            },
                            formatter: function (params) {
                                return `${params.value}%`
                            },
                        }
                    },
                    {
                        type: 'line',
                        silent: true,
                        animation: false,
                        markLine: {
                            symbol: ['none'], // 去掉箭头
                            lineStyle: {
                                width: 1,
                                // type: 'solid',  //'dotted'虚线 'solid'实线
                                color: '#ff6664',
                            },
                            // data: [{ name: 'USL', yAxis: usl }, { name: 'CL', yAxis: cl }, { name: 'LSL', yAxis: lsl }],
                            data: [{ name: 'yield目标值', yAxis: data.yieldTarget }],
                            label: {
                                show: true,
                                color: '#ff6664',
                                formatter: function (params) {
                                    return `${params.value}%`
                                },
                            }
                        }
                    },
                    {
                        name: '样本数',
                        type: 'line',
                        animation: false,
                        data: data.sampleCountArray,
                        itemStyle: { opacity: 0 },
                        lineStyle: { opacity: 0 }
                    },
                    {
                        name: '不良数',
                        type: 'line',
                        animation: false,
                        data: data.failCountArray,
                        itemStyle: { opacity: 0 },
                        lineStyle: { opacity: 0 }
                    }
                ],
                dataZoom: [
                    {
                        type: 'inside',
                        start: 0,
                        end: 10,
                        minValueSpan: 10
                    },
                    {
                        show: true,
                        type: 'slider',
                        bottom: 0,
                        start: 98,
                        end: 100,
                        minValueSpan: 10
                    }
                ]
            };
            return option
        }

    }
}
</script>

<style lang="scss" scoped>
.cpk-chart {
  .table {
    margin-bottom: 10px;

    // 滚动条默认宽度是16px 将thead的宽度减16px
    thead {
      width: calc(100% - 1em);
    }

    tbody {
      border: 1px solid #ddd;
      border-bottom: none;

      tr {
        border-bottom: 1px solid #ddd;

        td {
          border-right: 1px solid #ddd;
        }

        .last-cell {
          border-right: none;
        }
      }

      tr:nth-child(even) {
        background: #fbfce5 !important;
      }

      .text-blue {
        color: #5379de;
      }

      .width-label {
        width: 104px;
      }
    }
  }
}
</style>